@extends('master')

@section('title','注册')

@section('content')
    <div class="weui-cells__title">用户注册</div>
    {{--多选框，选择注册方式--}}
    <div class="weui-cells weui-cells_radio" style="margin-bottom: 20px;">
        <label class="weui-cell weui-check__label" for="x11">
            <div class="weui-cell__bd">
                <p style="font-weight: bold">手机号注册</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="register_type" id="x11"/>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="x12">

            <div class="weui-cell__bd">
                <p style="font-weight: bold">邮箱注册</p>
            </div>
            <div class="weui-cell__ft">
                <input type="radio" name="register_type" class="weui-check" id="x12" checked="checked"/>
                <span class="weui-icon-checked"></span>
            </div>
        </label>
    </div>

    <div class="weui-cells__title"></div>


    {{--手机号注册模板--}}
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="tel" class="weui-input" placeholder="请输入手机号" name="phone">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="tel" class="weui-input" placeholder="不少于6位" name="passwd_phone">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">确认密码</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="password" class="weui-input" placeholder="不少于6位" name="passwd_phone_cfm">
            </div>
        </div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd">
                <label class="weui-label">手机验证码</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" name="phone_code"/>
            </div>
            <div class="weui-cell__ft">
                <button class="weui-vcode-btn bk_phone_code_send ">获取验证码</button>
            </div>
        </div>

    </div>

    {{--邮箱注册模板--}}
    <div class="weui-cells weui-cells_form" style="display: none;">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">邮箱</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="email" class="weui-input" placeholder="请输入邮箱" name="email">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="number" class="weui-input" placeholder="不少于6位" name="passed_email">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">确认密码</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="password" class="weui-input" placeholder="不少于6位" name="passwd_email_cfm">
            </div>
        </div>
        <div class="weui-cell weui-cell_vcode">
            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
            <div class="weui-cell__bd weui-cell_primary">
                <input type="number" class="weui-input" placeholder="请输入验证码" name="validate_code">
            </div>
            <div class="weui-cell__ft">
                <img src="/service/validate_code/create" style="cursor: pointer;width: 104px;padding: 3px;" onclick="this.src='/service/validate_code/create?random='+Math.random()">
            </div>
        </div>

    </div>


    <div class="weui-cells__tips"></div>
    {{--注册按钮--}}
    <div class="weui-btn-area">
        <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="onRegisterClick();">注册</a>
    </div>
    <a href="/login" class="bk_bottom_tips bk_important">已有账号？去登陆</a>

@endsection

@section('my_js')
    <script type="text/javascript">
        $('#x12').next().hide();
        //当name=register_type的radio被点击时，触发匿名回调函数，实现两张登陆表的切换
        $('input:radio[name=register_type]').click(function(event){
            //把 手机号注册 和 邮箱 注册的radio 全部变为未选中状态
            $('input:radio[name=register_type]').attr('checked',false);
            //把当前所点击的radio 变成选中状态
            $(this).attr('checked',true);
            //根据 radio的 id 判断显示哪一个 和 隐藏哪一个
            //显示手机注册页面
            if($(this).attr('id')=='x11'){
                $('#x11').next().show();
                $('#x12').next().hide();
                //把第一个类为 weui-cells_form的元素进行显示，即为显示手机注册表单
                $('.weui-cells_form').eq(0).show();
                $('.weui-cells_form').eq(1).hide();
            }else if($(this).attr('id')=='x12'){    //显示邮箱注册页面
                $('#x12').next().show();
                $('#x11').next().hide();
                //把第二个类为 weui-cells_form的元素进行显示，即为显示邮箱注册表
                $('.weui-cells_form').eq(1).show();
                $('.weui-cells_form').eq(0).hide();

            }
        })


    </script>
    <script type="text/javascript">
        //发送验证码
        var enable=true;    //表示是否允许发送短信
        $('.bk_phone_code_send').click(function(event){
            //当不允许发送短信，就不会去调用发送短信这个接口
            if(enable==false){
                //直接return 出去，点击就无效了
                return;
            }

            var phone=$('input[name=phone]').val();

            //手机号不得为空
            if(phone==""){
                $('.bk_toptips').show();
                $('.bk_toptips').html("请输入手机号");
                setTimeout(function(){
                    $('.bk_toptips').hide();
                },2000);
                return ;
            }

            //手机格式的限制，长度要求为11位，并且首字母为1
            if(phone.length!==11||phone[0]!='1'){
                $('.bk_toptips').show();
                $('.bk_toptips').html("手机号码格式不正确");
                setTimeout(function(){
                    $('.bk_toptips').hide();
                },2000);
                return ;
            }

            //到这一步时，上面允许发送短信，而且已经点击过 ‘发送验证码’了
            //就要给他变成 false，使之在一定时间内不能被点击
            enable=false;
            //设置时间为 60 秒
            var num=60;
            //设置一个计时器，就是在每个一段时间，重复做某事
            //这个计时器的作用就是显示读秒的倒计时，当未到指定时间，就会把enable赋值为false,
            // 直到时间到了，才会把enable 赋值为true 使点击生效。
            // window.setInterval({要做的事情，一个函数},{时间间隔 单位ms 1000表示每隔一秒执行一下前面的操作函数})
            var interval=window.setInterval(function(){
                //把发送框里面的文字变成倒计时
                $('.bk_phone_code_send').html(--num+"s 后重新发送");
                //字体变灰，进入等待倒计时阶段
                $('.bk_phone_code_send').addClass('bk_summary');
                //当倒计时结束，即为 num减到0时
                if(num==0){
                    //把是否允许点击  改为 可点击
                    enable=true;
                    //字体变亮，表示可以尽心点击再次获取验证码了
                    $('.bk_phone_code_send').removeClass('bk_summary');
                    //摧毁这个计时器
                    window.clearInterval(interval);
                    //修改点击按钮内部的文字，提示用户现在可以修改啦
                    $('.bk_phone_code_send').html('重新发送');
                }
            },1000);

            //获取手机号码
            var phone=$('input[name=phone]').val();
            //以下代码表示在点击 ‘发送验证码’之后，在60秒内，会阻止点击操作到达此步
            //因为前面的 enable==false，所以点击操作直接被return 回去了。
            $.ajax({
                url:'service/validate_code/send',
                dataType:'json',
                //不缓存
                cache:false,
                data:{phone:phone},
                success:function(data){
                    //data为 json对象
                    //当 data=null 时，表示服务器端出了问题
                    if(data==null){
                        $('.bk_toptips').show();
                        $('.bk_toptips span').html('服务器端错误');
                        // $('.bk_toptips span').html('错误码：'+data.status+"=>"+data.message);
                        //设置定时器：这个函数表示2000ms后执行回调函数，即为把对话框给隐藏了
                        setTimeout(function(){
                            $('.bk_toptips').hide();
                        },2000);
                        return;
                    }
                    //当状态不为0 表示出错了，打印错误信息
                    if(data.status!=0){
                        $('.bk_toptips').show();
                        $('.bk_toptips span').html(data.message);
                        setTimeout(function(){
                            $('.bk_toptips').hide();
                        },2000);
                        return;
                    }

                    //操作成功时
                    $('.bk_toptips').show();
                    $('.bk_toptips span').html('发送成功');
                    setTimeout(function(){
                        $('.bk_toptips').hide();
                    },2000);

                },
                //失败时，控制台显示错误信息
                error:function(xhr,status,error){
                    console.log(xhr);
                    console.log(status);
                    console.log(error);
                }
            })
        });
    </script>
    <script type="text/javascript">
        function onRegisterClick(){

           $('input:radio[name=register_type]').each(function(index,el){
               if($(this).attr('checked')=='checked'){
                   var email="";
                   var phone="";
                   var password="";
                   var confirm="";
                   var phone_code="";
                   var validate_code="";
                   var id=$(this).attr('id');
                   if(id=='x11'){   //当用手机号注册时，获取手机号注册响应的值
                        phone=$('input[name=phone]').val();
                        password=$('input[name=passwd_phone]').val();
                        confirm=$('input[name=passwd_phone_cfm]').val();
                        phone_code=$('input[name=phone_code]').val();
                        //对数据进行校验，当数据不合理时，直接 return 走
                        if(verify(phone,password,confirm,phone_code)==false){
                            return ;
                        }
                   }else if(id=="x12"){    //当使用邮箱注册时
                       email=$('input[name=email]').val();
                       password=$('input[name=passwd_email]').val();
                       confirm=$('input[name=passswd_email_cfm]').val();
                       validate_code=$('input[name=validate_code]').val();
                       //对数据进行校验，当数据不合理时，直接 return 走
                       if(verify(email,password,confirm,validate_code)==false){
                           return ;
                       }
                   }
               }
           })
        }
    </script>
@endsection
